import React, { useEffect } from 'react'
import { Grid,Carousel, Toast,Modal } from 'antd-mobile'
import { connect } from 'react-redux'

import { resetUserData,removeRecord } from '../../redux/actions'
import {reqUserLogout} from '../../api'

import './index.scss'

const alert=Modal.alert

export default connect(state=>({user:state.user}),{resetUserData,removeRecord})(function Profile(props) {
  const {user,history,resetUserData,removeRecord}=props

  const featureData=[
    {icon:<i className='iconfont icon-coll'></i>,text:'我的收藏',path:'/collected'},
    {icon:<i className='iconfont icon-ind'></i>,text:'我的出租',path:'/manage'},
    {icon:<i className='iconfont icon-record'></i>,text:'看房记录',path:'/records'},
    {icon:<i className='iconfont icon-identity'></i>,text:'成为房主'},
    {icon:<i className='iconfont icon-myinfo'></i>,text:'个人资料',path:'/personal'},
    {icon:<i className='iconfont icon-cust'></i>,text:'联系我们',isPublic:true},
  ]
  const carouselData=[
    'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
    'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
    'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
  ]

  const logout=()=>{
    const ask=()=>alert('提示','是否确定要退出?',[
      {text:'取消'},
      {text:<span style={{color:'#21b97a'}}>退出</span>,onPress:()=>{
        resetUserData()
        removeRecord()
        reqUserLogout()
        history.replace('/home/profile')
      }},
    ])
    ask()
  }

  const checkLogin=(el)=>{
    if(el.isPublic)return true
    if(!user)return false
    return true
  }

  const MyAlert=()=>{
    alert('提示','登录之后才能查看,是否去登录?',[
      {text:'取消'},
      {text:<span style={{color:'#21b97a'}}>去登陆</span>,onPress:()=>history.push('/login')},
    ])
  }

  const activeStyle={
    backgroundColor:'#fff',
    color:'#2caf87'
  }

  useEffect(()=>{

  },[history])

  return (
    <div className='profile-page'>
      <div className='profile-background'>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dd1f5dc163bea801209e1fab677a.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632033902&t=403da51a691c913eb711de62367dfacb" alt="" />
        <div className='user-info'>
          <div className='avatar'><img src={user?'http://localhost:8080'+user.avatar:"https://img0.baidu.com/it/u=1682050408,2246241836&fm=26&fmt=auto&gp=0.jpg"} alt="" /></div>
          <div className='name'>{user?user.nickname:'游客'}</div>
          <div className='logout'>
            {
              user?
              <span onClick={()=>logout()}>退出</span>:
              <span onClick={()=>history.push('/login')}>去登录</span>
            }
          </div>
          {user?<div className='modify' onClick={()=>history.push('/personal')}>编辑个人资料<i className='iconfont icon-箭头向右'></i></div>:null}
        </div>
      </div>
      <div className='profile-feature'>
        <Grid data={featureData} activeStyle={activeStyle} onClick={el=>checkLogin(el)?(el.path!==undefined?history.push(el.path):Toast.info('暂不支持',2,null,false)):MyAlert()} hasLine={false} columnNum={3} square={false} itemStyle={{padding:'10px'}}></Grid>
      </div>
      <div className='profile-advertising'> 
        <Carousel
          autoplay={true}
          infinite
        >
          {carouselData.map(val => (
            <img  
              key={val}
              src={val}
              alt=""
              style={{ width: '100%', verticalAlign: 'top',height:'20vh' }}
            />
          ))}
        </Carousel>
      </div>
    </div>
  )
})
